<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>操作日志图表展示</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <!-- 引入 echarts.js -->
    <script src="/js/echarts.min.js"></script>
    <!--引入jquery-->
    <script src="/js/jquery-3.4.1.min.js"></script>
</head>
<body>
年：<select id="yselect" ></select>
月：<select id="mselect"><option >1</option><option>2</option><option>3</option><option>4</option>
    <option>5</option><option>6</option><option>7</option><option>8</option>
    <option>9</option><option>10</option><option>11</option><option>12</option></select>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 1200px;height:500px;"></div>
<script type="text/javascript">

    let date = new Date();
    let currYear = date.getFullYear();
    let currMonth = date.getMonth()+1;

    //动态添加下拉年份
    for (let i = currYear-4; i <= currYear; i++) {
        $("#yselect").append("<option>"+i+"</option>");
    }
    //赋予默认值
    $("#yselect").val(currYear);
    $("#mselect").val(currMonth);
    //当年改变时触发
    $("#yselect").change(function(){
        showOperLogChart($(this).val(),$("#mselect").val());
    });
    //当月改变时触发
    $("#mselect").change(function(){
        showOperLogChart($("#yselect").val(),$(this).val());
    });

    //初始化方法，默认当前年月
    showOperLogChart(currYear,date.getMonth()+1);
    // 展示图标方法
    function showOperLogChart(year,month) {
        let xData=[];
        let addData=[];
        let updateData=[];
        let delData=[];
        $.ajax({
            url: "/operLog/queryShowChartData",
            type: "GET",
            data: {year: year, month:month},
            async: false,
            dataType: "json",
            success: function (resp) {
                if (resp.code === 0) {
                    let data = resp.data;
                    for (let i = 0; i < data.length; i++) {
                        xData.push(data[i].day);
                        addData.push(data[i].addcount);
                        updateData.push(data[i].updatecount);
                        delData.push(data[i].delcount);
                    }
                }
            },
            error: function () {
                alert("请求失败");
            }
        });
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    var option =  {
        title: {
            text: '操作日志分析图',
            subtext: '纯属虚构'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['添加操作', '更新操作','删除操作']
        },
        toolbox: {
            show: true,
            feature: {
                dataZoom: {
                    yAxisIndex: 'none'
                },
                dataView: {readOnly: false},
                magicType: {type: ['line', 'bar']},
                restore: {},
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: xData
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                formatter: '{value} 次'
            }
        },
        series: [
            {
                name: '添加操作',
                type: 'line',
                data: addData,
                markPoint: {
                    data: [
                        {type: 'max', name: '最大值'},
                        {type: 'min', name: '最小值'}
                    ]
                },
                markLine: {
                    data: [
                        {type: 'average', name: '平均值'}
                    ]
                }
            },
            {
                name: '更新操作',
                type: 'line',
                data: updateData,
                markPoint: {
                    data: [
                        {name: '周最低', value: -2, xAxis: 1, yAxis: -1.5}
                    ]
                },
                markLine: {
                    data: [
                        {type: 'average', name: '平均值'},
                        [{
                            symbol: 'none',
                            x: '90%',
                            yAxis: 'max'
                        }, {
                            symbol: 'circle',
                            label: {
                                position: 'start',
                                formatter: '最大值'
                            },
                            type: 'max',
                            name: '最高点'
                        }]
                    ]
                }
            },
            {
                name: '删除操作',
                type: 'line',
                data: delData,
                markPoint: {
                    data: [
                        {type: 'max', name: '最大值'},
                        {type: 'min', name: '最小值'}
                    ]
                },
                markLine: {
                    data: [
                        {type: 'average', name: '平均值'}
                    ]
                }
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    };
</script>
</body>
</html>